<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no"/>
<meta name="wap-font-scale" content="no">
<meta name="renderer" content="webkit">
<title>AutoCode</title>
<link rel="shortcut icon" href="/favicon.ico" />
<script src="/links/jquery/jquery-3.5.1.min.js"></script>
<script src="/links/polyfill.min.js"></script>
<script src="/links/axios/axios.min.js"></script>
<script src="/links/vue/vue.min.js"></script>
<script src="/links/element-ui/index.js"></script>
<script src="/links/dayjs.min.js"></script>
<script src="/links/echarts/echarts.js"></script>
<script src="/links/JsBarcode.all.js"></script>
<script src="/links/qrcode.min.js"></script>
<script src="/links/layer/layer.js"></script>
<script src="/links/crypto/crypto-js.js"></script>
<script src="/js/dragController.js"></script>
<script src="/js/HttpApi.js"></script>
<script src="/js/AutoCode.js"></script>
<link href="/links/element-ui/theme/index.css" rel="stylesheet"/>
<link href="/css/default.css" rel="stylesheet"/>
<link href="/css/dragController.css" rel="stylesheet"/>
<script src="/links/ace/src/ace.js"></script>
<script src="/links/ace/src/ext-language_tools.js"></script>
<script src="/links/beautify/beautify.min.js"></script>
<script src="/links/beautify/beautify-css.min.js"></script>
<script src="/links/beautify/beautify-html.min.js"></script>
    <style>
        
    </style>
</head>
<body>
<div id="app"  class="box " >
<div class="left " style="width:600px;">
<div class="flex ac-table-head">
    <div class="ac-table-oper"><el-form :inline="true" label-position="left" :model="dict.operData" size="mini" class="searchForm" @submit.native.prevent="dict_load">
<el-form-item v-if="dict.operVisible.code==undefined || dict.operVisible.code"><el-input type="text" v-model="dict.operData.code" clearable placeholder="代码字典"  @keyup.enter.native="dict_load"></el-input>
</el-form-item>
<el-form-item v-if="dict.operVisible.query==undefined || dict.operVisible.query"><el-button size="medium"  v-if="dict.operVisible.query==undefined || dict.operVisible.query" @click="dict_load()" :disabled="dict.operDisabled.query"  type="text"     native-type="button">查询(R)</el-button>
</el-form-item>
<el-form-item v-if="dict.operVisible.add==undefined || dict.operVisible.add"><el-button size="medium"  v-if="dict.operVisible.add==undefined || dict.operVisible.add" @click="dict_openDictAdd()" :disabled="dict.operDisabled.add"  type="text"     native-type="button">添加(A)</el-button>
</el-form-item>
<el-form-item v-if="dict.operVisible.del==undefined || dict.operVisible.del"><el-button size="medium"  v-if="dict.operVisible.del==undefined || dict.operVisible.del" @click="dict_delete()" :disabled="dict.operDisabled.del"  type="text"     native-type="button">删除(D)</el-button>
</el-form-item>

</el-form>
</div>
    <div></div>
</div>
<div class="ac-table-content">
    <el-table row-key="id" highlight-current-row stripe show-header border  
    :data="dict.data" size="mini" ref="dict"
    :row-class-name="dict_rowClassName" :span-method="dict_spanMethod" :indent="0" :expand-row-keys="dict.expandRowKeys"
    height="100%"
    @current-change="dict_currentChange">
    <el-table-column prop="code" label="字典代码"    align="left"  show-overflow-tooltip class-name="ac-table-group">
   <template slot-scope="scope">
        <div v-if="scope.row.children && scope.row.children.length>0" >字典分组：{{scope.row.dictGroup}}{{ scope.row.children?'【'+scope.row.children.length+'】':''}}</div><template v-else>{{scope.row.code}}</template>
   </template>
</el-table-column>
<el-table-column prop="label" label="字典名称"    align="left"   class-name="editorCell">
   <template slot-scope="scope">
        <el-input size="mini" type="text" v-model="scope.row.label"  @change="dict_change('label',scope.row)"></el-input>

   </template>
</el-table-column>
<el-table-column prop="enable" label="启用" width="80"   align="center"   class-name="editorCell">
   <template slot-scope="scope">
        <el-checkbox  v-model="scope.row.enable"  size="small"  true-label="Y"  false-label="N"  @change="dict_change('enable',scope.row)"></el-checkbox>

   </template>
</el-table-column>

</el-table>

</div>
          
</div>
<div class="resize"></div>
<div class="right " style="width:calc(100% - 602px);">
<div class="flex ac-table-head">
    <div></div>
    <div class="ac-table-oper"><el-button size="medium"  v-if="dictItem.operVisible.add==undefined || dictItem.operVisible.add" @click="dictItem_openDictItemAdd()" :disabled="dictItem.operDisabled.add"  type="text"     native-type="button">添加(A)</el-button>
<el-button size="medium"  v-if="dictItem.operVisible.edit==undefined || dictItem.operVisible.edit" @click="dictItem_editDictItemAdd()" :disabled="dictItem.operDisabled.edit"  type="text"     native-type="button">编辑(E)</el-button>
<el-button size="medium"  v-if="dictItem.operVisible.del==undefined || dictItem.operVisible.del" @click="dictItem_sysDictItemDel()" :disabled="dictItem.operDisabled.del"  type="text"     native-type="button">删除(D)</el-button>
</div>
</div>
<div class="ac-table-content">
    <el-table row-key="id" highlight-current-row stripe show-header border  
    :data="dictItem.data" size="mini" ref="dictItem"
       
    height="100%"
    @current-change="dictItem_currentChange">
    <el-table-column prop="sortNo" label="序号" width="80"   align="left"   class-name="editorCell">
   <template slot-scope="scope">
        <el-input-number size="small" v-model="scope.row.sortNo" :min="0"   :step="1" :step-strictly="true"  :controls="false"  @change="dictItem_change('sortNo',scope.row)"></el-input-number>

   </template>
</el-table-column>
<el-table-column prop="code" label="代码"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.code}}
   </template>
</el-table-column>
<el-table-column prop="label" label="显示名称"    align="left"   class-name="editorCell">
   <template slot-scope="scope">
        <el-input size="mini" type="text" v-model="scope.row.label"  @change="dictItem_change('label',scope.row)"></el-input>

   </template>
</el-table-column>
<el-table-column prop="enable" label="启用" width="80"   align="center"   class-name="editorCell">
   <template slot-scope="scope">
        <el-checkbox  v-model="scope.row.enable"  size="small"  true-label="Y"  false-label="N"  @change="dictItem_change('enable',scope.row)"></el-checkbox>

   </template>
</el-table-column>
<el-table-column prop="showLabel" label="显示效果"    align="left"  show-overflow-tooltip >
    <template slot-scope="scope">
         <i :style="{color:scope.row.iconColor}" :class="scope.row.icon"></i> <label :style="{color:scope.row.fontColor}">{{scope.row.label}}</label>
    </template>
</el-table-column>
<el-table-column prop="icon" label="图标"    align="left"   >
   <template slot-scope="scope">
        <el-link :icon="scope.row.icon">{{scope.row.icon}}</el-link>

   </template>
</el-table-column>
<el-table-column prop="iconColor" label="图标颜色"    align="left"   >
   <template slot-scope="scope">
        <label :style="{color:scope.row.iconColor}">{{scope.row.iconColor}}</label>

   </template>
</el-table-column>
<el-table-column prop="fontColor" label="字体颜色"    align="left"   >
   <template slot-scope="scope">
        <label :style="{color:scope.row.fontColor}">{{scope.row.fontColor}}</label>

   </template>
</el-table-column>

</el-table>

</div>

</div>

<el-dialog :visible.sync="dictItemAdd.visible" :title="dictItemAdd.title"
            width="50%"
            :close-on-click-modal="false"
            :close-on-press-escape="false">
            <div style="width:100%;">
                <el-form class=""    label-width="80px" label-position="right"
     size="mini" ref="dictItemAdd" :model="dictItemAdd.data" :rules="dictItemAdd.rules"  
     :disabled="dictItemAdd.disabled" @submit.native.prevent>
    <el-row><el-col :span=24 v-if="dictItemAdd.itemVisible.code==undefined || dictItemAdd.itemVisible.code">
    <el-form-item prop="code" label="代码">
        
<el-input type="text" size="mini"  v-model="dictItemAdd.data.code" placeholder="代码" :disabled="dictItemAdd.editorForm || dictItemAdd.itemDisabled.code"  @keyup.enter.native="dictItemAdd_dialogOk"  ></el-input>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="dictItemAdd.itemVisible.label==undefined || dictItemAdd.itemVisible.label">
    <el-form-item prop="label" label="显示名称">
        
<el-input type="text" size="mini"  v-model="dictItemAdd.data.label" placeholder="显示名称" :disabled="dictItemAdd.itemDisabled.label"  @keyup.enter.native="dictItemAdd_dialogOk"  ></el-input>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="dictItemAdd.itemVisible.icon==undefined || dictItemAdd.itemVisible.icon">
    <el-form-item prop="icon" label="图标">
         <el-select v-model="dictItemAdd.data.icon" size="small" placeholder="请选择" clearable  >
      <el-option v-for="item in ICON_PICKER" :key="item.icon" :label="item.icon" :value="item.icon" class="overlay-options">
            <template>
               <div>
                   <el-icon :class="item.icon"></el-icon>
               </div>
            </template>
      </el-option>
      <template slot="prefix">
          <i :class="'el-input__icon '+dictItemAdd.data.icon"></i>
      </template>
</el-select>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="dictItemAdd.itemVisible.iconColor==undefined || dictItemAdd.itemVisible.iconColor">
    <el-form-item prop="iconColor" label="图标颜色">
        <div style="display:inline-flex;align-items: center;">
    <el-input type="text" size="mini"  v-model="dictItemAdd.data.iconColor" readonly></el-input>
    <el-color-picker v-model="dictItemAdd.data.iconColor" size="mini" :disabled="dictItemAdd.itemDisabled.iconColor" ></el-color-picker>
</div>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="dictItemAdd.itemVisible.fontColor==undefined || dictItemAdd.itemVisible.fontColor">
    <el-form-item prop="fontColor" label="字体颜色">
        <div style="display:inline-flex;align-items: center;">
    <el-input type="text" size="mini"  v-model="dictItemAdd.data.fontColor" readonly></el-input>
    <el-color-picker v-model="dictItemAdd.data.fontColor" size="mini" :disabled="dictItemAdd.itemDisabled.fontColor" ></el-color-picker>
</div>

        
    </el-form-item>
</el-col>
</el-row>
 </el-form>

            </div>
            <div class="dialog-footer" slot="footer">    <el-button size="mini" @click="dictItemAdd_dialogOk()"  type="primary"      native-type="button">确 定</el-button>
    <el-button size="medium" @click="dictItemAdd_dialogCancel()"  type="text"      native-type="button">取 消</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="dictAdd.visible" :title="dictAdd.title"
            width="50%"
            :close-on-click-modal="false"
            :close-on-press-escape="false">
            <div style="width:100%;">
                <el-form class=""    label-width="80px" label-position="right"
     size="mini" ref="dictAdd" :model="dictAdd.data" :rules="dictAdd.rules"  
     :disabled="dictAdd.disabled" @submit.native.prevent>
    <el-row><el-col :span=24 v-if="dictAdd.itemVisible.dictGroup==undefined || dictAdd.itemVisible.dictGroup">
    <el-form-item prop="dictGroup" label="字典分组">
        <el-select v-model="dictAdd.data.dictGroup"  placeholder="字典分组" size="mini" :disabled="dictAdd.itemDisabled.dictGroup" clearable  allow-create filterable default-first-option  @keyup.enter.native="dictAdd_dialogOk">
   <el-option v-for="dict in customOptions.dictGroup" :label="dict.label" :value="dict.value"></el-option>
</el-select>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="dictAdd.itemVisible.code==undefined || dictAdd.itemVisible.code">
    <el-form-item prop="code" label="字典代码">
        
<el-input type="text" size="mini"  v-model="dictAdd.data.code" placeholder="字典代码" :disabled="dictAdd.editorForm || dictAdd.itemDisabled.code"  @keyup.enter.native="dictAdd_dialogOk"  ></el-input>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="dictAdd.itemVisible.label==undefined || dictAdd.itemVisible.label">
    <el-form-item prop="label" label="字典名称">
        
<el-input type="text" size="mini"  v-model="dictAdd.data.label" placeholder="字典名称" :disabled="dictAdd.itemDisabled.label"  @keyup.enter.native="dictAdd_dialogOk"  ></el-input>

        
    </el-form-item>
</el-col>
</el-row>
 </el-form>

            </div>
            <div class="dialog-footer" slot="footer">    <el-button size="mini" @click="dictAdd_dialogOk()"  type="primary"      native-type="button">确 定</el-button>
    <el-button size="medium" @click="dictAdd_dialogCancel()"  type="text"      native-type="button">取 消</el-button>
</div>
</el-dialog>


</div>

</body>
<script th:inline="javascript">
    let vm = new Vue({
            el: '#app',
            data() {
                return {"dict":{"title":"字典组","currentRow":{},"data":[],"expandRowKeys":[],"pagingData":{},"operData":{},"operVisible":{},"operDisabled":{},"rawData":[],"itemVisible":{},"operDialogVisible":false},"dictItem":{"title":"字典值","currentRow":{},"data":[],"expandRowKeys":[],"pagingData":{},"operData":{},"operVisible":{},"operDisabled":{},"rawData":[],"itemVisible":{},"operDialogVisible":false},"page":{},"tabDisabled":{},"tabVisible":{},"customOptions":{},"dictOptions":{},"dictItemAdd":{"visible":false,"title":"添加字典值","data":{},"operVisible":{},"operDisabled":{},"operData":{},"disabled":false,"editorForm":true,"itemVisible":{},"itemDisabled":{},"transfer":{},"rules":{"code":[{"required":true,"message":"请输入代码","trigger":"blur"}],"label":[{"required":true,"message":"请输入显示名称","trigger":"blur"}]}},"dictAdd":{"visible":false,"title":"添加字典组","data":{},"operVisible":{},"operDisabled":{},"operData":{},"disabled":false,"editorForm":true,"itemVisible":{},"itemDisabled":{},"transfer":{},"rules":{"dictGroup":[{"required":true,"message":"请输入字典分组","trigger":"blur"}],"code":[{"required":true,"message":"请输入字典代码","trigger":"blur"}],"label":[{"required":true,"message":"请输入字典名称","trigger":"blur"}]}}}
            },
            watch: {
},
            methods: {
dict_change:function(fieldName,row){
    HttpApi.updateProvider("sysDict",fieldName,row,function(){

    });
}
,
dict_currentChange:function(currentRow,oldCurrentRow){
    let that = this;
    if(!currentRow){
        this.$data.dict.currentRow = this.$options.data().dict.currentRow;
        this.$data.dictItem.operData=this.$options.data().dictItem.operData;
this.$data.dictItem.data=this.$options.data().dictItem.data;

    }else{
        if(!currentRow.children){
            this.dict.currentRow = currentRow;
                this.dictItem.operData.dictCode=this.dict.currentRow.code;
this.dictItem_load();

        }else if(oldCurrentRow){
            that.$nextTick(function(){
                that.$refs.dict.setCurrentRow(oldCurrentRow);
            });
        }
    }
    this.dict_operCtrl(currentRow);
},
dictItem_sysDictItemDel:function(){
    let that = this;
    let id=that.dictItem.currentRow.id;
    if(id){
        HttpApi.delProviderConfirm("sysDictItem", that.dictItem.currentRow,function(res){
             let index = that.dictItem.data.findIndex(function(item){
                 return item.id==id;
             });
             that.dictItem.data.splice(index,1);
             if(that.dictItem.data.length==0){
                 that.$data.dictItem.currentRow = that.$options.data().dictItem.currentRow;
             }else if(that.dictItem.data.length>index){
                 that.$refs.dictItem.setCurrentRow(that.dictItem.data[index]);
             }else{
                 that.$refs.dictItem.setCurrentRow(that.dictItem.data[index-1]);
             }
             that.$message.success("删除成功");
        });
    }else{
       that.$alert("请选择要删除的数据");
    }
}
,
dict_operCtrl:function(currentRow) {
    /**
    * operDisabled：控制按钮的是否禁止操作，true代表禁止操作，false代表允许操作
    * this.$set(this.stdSolReceiveHistory.operDisabled, "buttonE", true);
    * operVisible：控制按钮是否显示，true代表显示，false代表不显示
    * this.$set(this.stdSolReceiveHistory.operVisible, "buttonE", false);
    */
    if(!currentRow) {
       this.$set(this.dict.operDisabled, "eidt", true);//编辑(E)
this.$set(this.dict.operDisabled, "del", true);//删除(D)

    }else {
       this.$set(this.dict.operDisabled, "eidt", false);//编辑(E)
this.$set(this.dict.operDisabled, "del", false);//删除(D)

    }
},
dictItem_currentChange:function(currentRow){
    if(!currentRow){
        //如果没有传入值，则将当前的选中值清空
        this.$data.dictItem.currentRow = this.$options.data().dictItem.currentRow;
    }else{
        this.dictItem.currentRow = currentRow;
    }
},
dictAdd_dialogOpen:function(param,callback){
    this.$data.dictAdd.data = this.$options.data().dictAdd.data;
    for(let val in param) {
        this.$set(this.dictAdd.data, val, param[val])
    }
    this.dictAdd.callback=callback;
    this.dictAdd.visible = true;
}
,
dictItem_operCtrl:function(currentRow) {
    /**
    * operDisabled：控制按钮的是否禁止操作，true代表禁止操作，false代表允许操作
    * this.$set(this.stdSolReceiveHistory.operDisabled, "buttonE", true);
    * operVisible：控制按钮是否显示，true代表显示，false代表不显示
    * this.$set(this.stdSolReceiveHistory.operVisible, "buttonE", false);
    */
    if(!currentRow) {
       this.$set(this.dictItem.operDisabled, "ele_00089", true);//删除(D)

    }else {
       this.$set(this.dictItem.operDisabled, "ele_00089", false);//删除(D)

    }
},
dictItemAdd_dialogOk:function(){
    let that = this;
      this.$refs.dictItemAdd.validate(function(valid){
           if(valid){
                that.dictItemAdd.callback(that.dictItemAdd.data);
           }else{
                return false;
           }
      });
},
dict_openDictAdd:function(){
    let that = this;
    this.dictAdd.editorForm = false;
    let param = {};
    
    this.dictAdd_dialogOpen(param,function(dialogData){
        HttpApi.saveProvider("sysDict",dialogData,function(res){
            that.dict.rawData.push(res);
            //添加分组信息
            let groupData = AutoCode.tableGroup(that.dict.rawData,"dictGroup");
            that.dict.data = groupData;
            let groupIndex = that.dict.data.findIndex(function(item){
                return item["dictGroup"]==res["dictGroup"];
            });
            that.dict.expandRowKeys.push(groupData[groupIndex].id);
            that.$nextTick(function(){
                that.$refs.dict.setCurrentRow(res);
            });
            that.dictAdd.visible = false;
        });
    })
},
dictAdd_dialogOk:function(){
    let that = this;
    this.$refs.dictAdd.validate(function(valid){
        if(valid){
            that.dictAdd.callback(that.dictAdd.data);
        }else{
            return false;
        }
    });
},
dictItem_load:function(){
    let that = this;
    HttpApi.queryArray("sysDictItem",that.dictItem.operData,function(res){
        that.dictItem.data = res;
if(res.length>0){
   that.$refs.dictItem.setCurrentRow(res[0]);
}

    });
}
,
dict_load:function(){
    let that = this;
    HttpApi.queryArray("sysDict",this.dict.operData,function(res){
        that.$data.dict.expandRowKeys = that.$options.data().dict.expandRowKeys;
        that.dict.rawData = res;
        if(that.dict.rawData.length>0){
            let groupData = AutoCode.tableGroup(that.dict.rawData,"dictGroup");
            that.dict.data = groupData;
            that.dict.expandRowKeys.push(groupData[0].id);
            that.$nextTick(function(){
                that.$refs.dict.setCurrentRow(groupData[0].children[0]);
                that.dict_operCtrl(groupData[0].children[0]);
            });
        }else{
            that.dict.data = [];
            that.$nextTick(function(){
                that.$refs.dict.setCurrentRow();
                that.dict_operCtrl();
            });
        }
    });
},
dictAdd_dialogCancel:function(){
     this.dictAdd.visible = false;
},
dictItemAdd_dialogCancel:function(){
     this.dictItemAdd.visible = false;
},
dictItem_editDictItemAdd:function(){
    let that = this;
    this.dictItemAdd.editorForm = true;
    if(!this.dictItem.currentRow.id){
        this.$alert("请先选中一条字典值信息");
        return;
    }else{
        this.dictItemAdd_dialogOpen(this.dictItem.currentRow,function(dialogData){
            HttpApi.saveProvider("sysDictItem",dialogData,function(res){
                let index = that.dictItem.data.findIndex(function(item){
                    return item.id==res.id;
                });
                that.$set(that.dictItem.data, index, res);
                that.$refs.dictItem.setCurrentRow(res);
                that.$message.success("操作成功！");
                that.dictItemAdd.visible = false;
            });
        })
    }
},
dict_rowClassName:function({row, rowIndex}){
    if(row.children && row.children.length>0){
       return "ac-table-group-row";
    }
}
,
dictItemAdd_dialogOpen:function(param,callback){
    this.$data.dictItemAdd.data = this.$options.data().dictItemAdd.data;
    for(let val in param) {
        this.$set(this.dictItemAdd.data, val, param[val])
    }
    this.dictItemAdd.callback=callback;
    this.dictItemAdd.visible = true;
}
,
dict_spanMethod: function({ row, column, rowIndex, columnIndex }){
      if(row.children && row.children.length>0 && columnIndex==0){
         return [1,3];
      }
}
,
dictItem_openDictItemAdd:function(){
    let that = this;
    if (!this.dict.currentRow.id) {
        this.$alert("请先选中一条字典组信息");
        return;
    }else{
        this.dictItemAdd.editorForm = false;
        let param = {};
        param.dictCode=this.dictItem.operData.dictCode;

        this.dictItemAdd_dialogOpen(param,function(dialogData){
            HttpApi.saveProvider("sysDictItem",dialogData,function(res){
                that.$message.success("操作成功！");
                that.dictItem.data.push(res);
                that.$refs.dictItem.setCurrentRow(res);
                that.dictItemAdd.visible = false;
            });
        })
    
    }
},
dictItem_change:function(fieldName,row){
    HttpApi.updateProvider("sysDictItem",fieldName,row,function(){

    });
}
,
dict_delete:function(){
    let that = this;
    let id=this.dict.currentRow.id;
    if(id){
        HttpApi.delProviderConfirm("sysDict", this.dict.currentRow,function(res){
            let index = that.dict.rawData.findIndex(function(item){
                return item.id==id;
            });
            that.dict.rawData.splice(index,1);
                        
            for (let groupIndex in that.dict.data) {
                let item = that.dict.data[groupIndex];
                let index = item.children.findIndex(function(item){
                    return item.id==id;
                });
                if(index>=0){
                    if(item.children.length<=1){
                        that.dict.data.splice(groupIndex,1);
                    }else{
                        item.children.splice(index,1);
                    }
                }
            }
            that.$refs.dict.setCurrentRow();
            that.$message.success("删除成功");
        });
    }else{
        that.$alert("请选择要删除的数据");
    }
}
},
            mounted: function(){
    dragControllerLR();
    dragControllerUD();
},
            created: function(){
    let that=this;
    //获取字典信息
    HttpApi.dictOptions([],function(res){
        that.dictOptions=res;
    });

    //加载自定义数据字典
    HttpApi.customOptions("dictGroup",{},function(res){
    that.$set(that.customOptions, "dictGroup", res);
});


    //加载初始化load
    this.dict_load();


    //加载初始化方法
    
}
    });
    

    
</script>
</html>
